常用HTML與CSS整理-基礎

第 11 屆 iThome 鐵人賽

DAY 1

自我挑戰組

網頁排版個人學習筆記系列第 1 篇

11th鐵人賽

echocarrie

2019-09-02 19:34:15

7100 瀏覽

分享至

前言

紀錄一些基本的HTML標籤與css屬性，方便斷線外加金魚腦時有地方撈資料

換行標籤

等於斷行

<br>

分隔線標籤

<hr>

H1~H6、p

對網頁來說 H1 ~ H6，數字越小權重越大
文字段落用 p 即可
一個網頁只會有一個 h1( 可用於 logo 或頁面中最重要的資訊 )
每段內容都要視權重標示清楚，優良的語意化網頁結構才有辦法讓搜尋引擎友善的收錄

LOGO圖片取代文字運用

讓搜尋引擎能夠找到網站重要內容
設 h1 表權重最重，h1 內設 a連結與文字
加入下方 css 屬性 text-indent、overflow、white-space ( logo 圖就會取代文字 )
a連結為內元素，記得寫 display:block 變區塊元素 logo 圖才會正確顯示

<h1>
   <a href="#">EchoCarrie Website</a>
</h1>

h1 a{
  display:block;  /*a行內元素便區塊*/
  text-indent:101%;  /*首行縮排*/
  overflow:hidden;   /*自動隱藏超出的文字或圖片*/
  white-space:nowrap; /*希望元素在第一排上面，沒有斷行*/
  background:url('圖片路徑') no-repeat;
  width:自訂;
  height:自訂;
}

a超連結運用

滑鼠指入連結文字，顯示提示文字 ( 連結替代文字 )

<a href="#" title="連結替代文字">顯示文字</a>

連結文字另外開啟頁面

<a href="www.yahoo.com.tw" title="連結替代文字" target="_blank" >Yaoo首頁</a>

圖片連結

<a href="#"><img src="圖片路徑"></a>

img title 與 img alt語法

img title 滑鼠移經顯示的文字標示
img alt 圖片失效顯示的替代文字

<img src="圖片路徑" alt="圖片替代文字" title="圖片標題">

項目標籤

1.基本語法:
-ul 搭配 li，項目前方會出現實心的圓型 ( 前提 : 未使用 css reset )

<ul>
　<li></li>
</ul>

2.基本語法:
-ol 搭配 li，項目前方會出現數字( 前提 : 未使用 css reset )

<ol>
　<li></li>
</ol>

常用的 css 項目標籤符號，list-style 的參數表:
-使用 css reset 預設會把項目標籤前方符號拿掉，可使用 list-style 加下方 css

none  不顯示符號
disc  實心圓型
circle    空心圓型
square    實心正方形
lower-alpha  小寫英文字母
upper-alpha 大寫英文字母
lower-roman  小寫羅馬數字
upper-roman  大寫羅馬數字
decimal 阿拉伯數字

表格

需以 <table></table> 包覆著標籤
通常會在 table下class 方便做內部優化
表格內會用到的標籤: tr、th、td
-tr : 表格列
-th : 表格欄，標題(預設為粗體)
-td : 表格欄，一般內容

<table class="price">
      <tr>
        <th>標題一</th>
        <th>標題二</th>
        <th>標題三</th>
        <th>標題四</th>
      </tr>
      <tr>
        <td>內容一</td>
        <td>內容二</td>
        <td>內容三</td>
        <td>內容四</td>
      </tr>
      <tr>
        <td>內容a</td>
        <td>內容b</td>
        <td>內容c</td>
        <td>內容d</td>
      </tr>
</table>

表格|colspan屬性

讓 td 橫跨多列，類似 excel 合併儲存格效果

<table>
      <tr>
        <th>標題一</th>
        <th>標題二</th>
        <th>標題三</th>
        <th>標題三</th>
    </tr>
    <tr>
      <td colspan="2">內容一</td>
      <td>內容二</td>
    </tr>
  </table>

head 區塊常用設定

<!--============head區塊總整理============-->
<head>
    <meta charset="UTF-8"> <!--UFT-8編碼-->
    <title>HTML、CSS教學</title> <!--頁籤的文字-->
 
    <link rel="shortcut icon" href="favicon.ico"> <!--頁籤標題前的形象icon，圖片大小32x32-->
    <meta name='description' content='網站描述文字' />
    <meta name="keywords" content='關鍵字一,關鍵字二,關鍵字三' /> <!--網站關鍵字，關鍵字間加逗號-->

    <meta property="og:title" content="FB的標題" />
    <meta property="og:description" content="FB的描述">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="FB上的網址" />
    <meta property="og:image" content="FB的圖片" />

    <link href="圖片路徑" rel="apple-touch-icon" />

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />  <!--IE兼容性設定-->

    <link rel="stylesheet" href="CSS檔案路徑"> <!--載入CSS檔案-->
    <script type="text/javascript" src="JS檔案路徑"></script> <!--載入JavaScript檔案-->
</head>

使用者於 FB 貼連結時，顯示客製化資訊 / 自架設定

Facebook for Developers 開設一個 App 並將 app_id 填入，這可以讓你在 Facebook 的分析工具看到更多詳細資訊，例如每篇文章的分享數
於內的og系列設定，如下

og顯示於臉書示意圖

<meta property="og:title" content="填網站標題" />
<meta property="og:description" content="填網站描述"/>
<meta property="og:type" content='website' />
<meta property="og:url" content="填網站上的網址" />
<meta property="og:image" content="填網站圖片路徑"/>
<meta property="og:site_name" content="填網站名稱" />
<meta property="fb:app_id" content="填入FB Facebook for Developers ID" />

使用者於 FB 貼連結時，顯示客製化資訊 / WordPress 設定

寫在header.php 的<head></head>中
fb:app_id : 可至 Facebook洞察報告(Facebook for Developers)新增應用程式編號。洞察報告中可讓你從FB檢視網置的流量分析

<meta property="og:title" content="填網站標題" />
<meta property="og:description" content="填網站描述"/>
<meta property="og:type" content='website' />
<meta property="og:url" content="填網站網址" />
<meta property="og:image" content="填網站圖片路徑"/>
<meta property="fb:app_id" content="填入Facebook for Developers ID" />

基本 css 屬性

text-align 字的水平對齊
line-height 字體範圍高度
text-decoration 裝飾底線
text-indent 首行縮排
border-radius 圓弧效果
-正圓型:50%
-可用px來調整圓弧度
-單一邊變圓弧效果:30px 0 0 0; (順時鐘)
背景漸層效果
-CSS Gradients教學
-上到下 background:linear-gradient( red , yellow);
-左到右 background:linear-gradient( to right, red , yellow );
-寫background 或background-image皆可行
box-shandow 陰影效果
-陰影效果工具
-box-shadow(2px 2px 20px gray )第1個數值x軸第2個數值y軸擴散值顏色
overflow:hidden 自動隱藏超出的文字或圖片
- overflow其他屬性文章
- overflow:hidden 其他用法
  - 用h1寫logo
  - 滑鼠滑入box範圍內，box內的title範圍從隱藏變顯示範例
    - 如果想要滑鼠滑入出現title範圍效果不要那麼突兀，可以使用transition範例